YoungGyu Blog

[프론트엔드 인터뷰]FE-Study 4주차 1회

March 23, 2022

singel page app이 무엇인지 설명하고 SEO-friendly하게 만드는 방법을 설명하세요.

웹 개발자는 요즘 웹사이트가 아닌 웹 앱으로 제작한 제품을 언급합니다. 두 가지 용어 사이에는 엄격한 차이는 없지만, 웹 앱은 대화형, 동적인 경향이 있어 사용자가 작업에 대한 응답ㅇ르 받을 수 있습니다. 전통적으로, 브라우저는 서버에서 HTML을 받아 렌더링합니다. 사용자가 다른 URL로 이동하면, 전체페이지 새로고침이 필요하며 서버는 새페이지에 대해 새 HTML을 보냅니다. 이를 server-side-rendering이라고 합니다.

그러나 현태 SPA에서는 대신 client-side rendering이 사용됩니다. 브라우저는 전체 애플리케이션에 필요한 스크립트(프레임워크, 라이브러리, 앱 코드) 및 스타일시트와 함께 서버의 초기 페이지를 로드합니다. 사용자가 다른 페이지로 이동하면 페이지 새로고침이 발생하지 않습니다. 페이지의 URL은 HTML5 History API를 통해 업데이트됩니다. 일반적으로 JSON 형식의 새 페이지에 필요한 새 데이터는 브라우저에서 AJAX요청을 통해 서버로 전송됩니다. SPA는 초기 페이지 로딩에서 미리 다운로드된 JavaScript를 통해 페이지를 동적으로 업데이트합니다. 이 모델은 네이티브 모바일 앱의 작동 방식과 유사합니다.

장점

  • 전체 페이지 새로고침으로 인해 페이지 탐색 사이에 하얀 화면이 보이지 않아 앱이 더 반응적으로 느껴지게 됩니다.
  • 동일한 애셋 페이지 로드마다 다시 다운로드할 필요가 없으므로 서버에 대한 HTTP 요청이 줄어듭니다.
  • 클라이언트와 서버 사이의 고려해야 할 부분을 명확하게 구분합니다. 서버 코드를 수정하지 않고도 다양한 플랫폼(예: 모바일, 채팅 봇, 스마트워치)에 맞는 새로운 클라이언트를 쉽게 구축할 수 있습니다. 또한 API 규약이 꺠지지 않는 한도 내에서 클라이언트와 서버에서 기술 스택을 독립적으로 수정할 수 있습니다.

단점들

  • 여러 페이지에 필요한 프레임워크, 앱 코드, 애셋로드로 인해 초기 페이지로드가 무거워집니다.
  • 모든 요청을 단일 진입점으로 라우트하고 클라이언트 측 라우팅이 그 한곳에서 인계받을 수 있도록 서버를 구성하는 추가 단계가 필요합니다.
  • SPA는 콘텐츠를 렌더링하기 위해 JavaScript에 의존하지만 모든 검색 엔진이 크롤링중에 javaScript를 실행하지 않으며 페이지에 빈 콘텐츠가 표시될 수 있습니다. 이로 인해 의도치 않게 앱의 검색 엔진 최적화(SED)가 어려워 집니다. 그러나 대부분의 경우 앱을 제작할 떄 검색 엔진에서 모든 컨텐츠 색인할 필요는 없으므로 SEO가 가장 중요한 요소는 아닙니다. 이를 극복하기 위해, 앱을 서버측 렌처링하거나 Prerender와 같은 서비스를 사용하며 “브라우저에서 JavaScript를 렌더링하고, 정적 HTML을 저장한 다음, 크롤러에게 반환합니다.
  • SPA의 초기 렌더링을 최적화하는 방법은 코드분할(Code Splitting)이 있습니다. 코드 분할을 활용하게 되면 초기 로딩시에 모든 웹 자원을 다운받지 않고 필요한 시점에 다운 받아 성능 상의 이점이 생깁니다.

Static Site Generator(SSG)

이 방식은 클라이언트에서 필요한 페이지들을 사전에 미리 준비해뒀다가, 요청을 받으면 요청에 따라 계속 서버에서 재생성 하는 것이 아니라 이미 생성이 완료된 페이지를 반환해주게 된다. 따라서 생성이 완료된 HTML문서를 재활용하기에 응답 속도가 빠르다.

SSG 동작방식

  1. 사용자가 웹 페이지를 방문하면(request), 엣지 캐싱(edge caching)된 HTML 클라이언트로 반환해 준다.
  2. 브라우저는 HTML을 다운로드하고 최종 사용자가 사이트를 볼 수 있게 한다.

엣지 캐싱이란?

최종 사용자에게 더 가까운 컨텐츠를 저장하기 위해 캐시 서버를 사용하는 것이다. 대표적으로 CDN을 많이 사용한다.

캐시 서버는 인터넷 서비스 속도를 높이기 위해 사용자와 가까운 곳에 데이터를 임시 저장하여 빠르게 제공해주는 프록시서버를 의미한다.

Promise와 Polyfill에 대한 당신의 경험은 어느 정도 인가요?

일단 프로미스는 비동기 처리 상태와 처리 결과를 관리하는 객체입니다. new 연산자와 함께 Promise 객체를 생성하고 비동기 처리를 수행할 콜백 함수를 resolve, reject인자로 받습니다. 여기서 resolve된 상태를 fulfilled 상태라고 하고, reject된 상태는 rejected상태라고 합니다. 둘 다 아닌 상태는 pending상태라고 합니다.

status: pending => resolve => status: fulfilled, result: value
status: pending => resolve => status: rejected, result: error

Callback 대신에 Promise를 사용할 때의 장점과 단점은 무엇인가요?

장점

  • 가독성이 떨어질 수 있는 콜백 지옥을 피할 수 있습니다.
  • .then()을 이용하여 가독성 좋은 연속적인 비동기 코드를 쉽게 작성할 수 있습니다.
  • Promise.all()을 사용하여 병렬 비동기 코드를 쉽게 작성할 수 있습니다.
Promise.all([promise1, promise2, promise3]).then(values => {
  console.log(values)
})

단점

  • ES2015를 지원하지 않는 이정 브라우저에서 이를 사용하기 위해서는 polyfill을 로드해야 합니다.

JavaScript로 컴파일되는 언어로 JavaScript 코드를 작성하는 경우의 장단점을 무엇인가요?

JavaScript로 컴파일되는 언어의 예로 CoffeeScript, Elm, ClojureScript, PureScript, TypeScript가 있습니다.

장점

  • JavaScript의 오랜 문제점들을 해결하고 JavaScript 안티-패턴을 방지합니다.
  • JavaScript 위에 syntatic sugar를 제공함으로써 더 짧은 소스코드를 작성할 수 있도록 해줍니다.
  • 정적 타입은 시간 경과에 따라 유지 관리해야 하는 대규모 프로젝트에서 훌륭합니다(TypeScript)

단점

  • 브라우저는 오직 JavaScript만 실행하기 때문에 빌드/컴파일 프로세스가 필요하며 브라우저에 제공되기 전에 JavaScript로 코드를 컴파일해야 합니다.
  • 소스 맵이 미리 컴파일된 소스에 잘 매핑되지 않으면 디버깅이 어려울 수 있습니다.
  • 대부분의 개발자들은 이러한 언어에 익숙하지 않으므로 시간비용이 소요됩니다.
  • 이런 언어들은 항상 최신 JavaScript 표준보다 뒤쳐집니다.
Lee YoungGyu